import * as echarts from "echarts";
import { useEffect, useRef } from "react";
import { useThemeStore } from "@/store";
import { dark, vintage, walden } from './theme'

type Props = {
  title: string;
  textColor?: string;
}

// 获取渲染图表的dom节点
const BarChart = (props: Props) => {
  const { theme } = useThemeStore()

  const charRef = useRef(null);
  useEffect(() => {
    const chartDom = charRef.current;
    // 图表初始化生成图表实例对象
    let myChart = echarts.getInstanceByDom(chartDom);
    if (myChart != null) {
      myChart.dispose();
    }
    myChart = echarts.init(chartDom, theme == 'dark' ? dark : walden);
    // 准备图表参数
    const option = {
      title: {
        text: props.title,
        // textStyle: {
        //   color: props.textColor,
        // }
      },
      xAxis: {
        type: "category",
        data: ["Vue", "Angular", "React"],
        
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 250],
          type: "bar",
        },
      ],
    };

    // 使用图表参数完成图表渲染
    option && myChart.setOption(option);
  }, [theme]);

  return <div ref={charRef} style={{ width: 600, height: 400 }}></div>;
};

export default BarChart
